<template>
  <div class="meeting-info-box">
    <el-page-header
      class="back"
      @back="goBack"
    >
      <template slot="content">
        会议详情
      </template>
    </el-page-header>
    <div class="meetinginfo">
      <div class="left">
        <meeting-title
          :title="_title"
          :time="_time"
        />
        <meeting-video :video-path="_videoPath" />
        <meeting-subtitle-edit v-if="isFounder" />
        <meeting-members :members="_members" />
        <meeting-word-cloud :word-cloud="_wordCloud" />
        <meeting-abstract />
      </div>
      <div class="right">
        <meeting-founder :founder="_founder" />
        <el-collapse v-model="activeName">
          <el-collapse-item
            title="聊天记录"
            name="1"
          >
            <meeting-message />
          </el-collapse-item>
          <el-collapse-item
            title="相关文件"
            name="2"
          >
            <meeting-file />
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import MeetingTitle from './MeetingTitle'
import MeetingVideo from './MeetingVideo'
import MeetingSubtitleEdit from './MeetingSubtitleEdit'
import MeetingMembers from './MeetingMembers'
import MeetingWordCloud from './MeetingWordCloud'
import MeetingAbstract from './MeetingAbstract'
import MeetingFounder from './MeetingFounder'
import MeetingMessage from './MeetingMessage'
import MeetingFile from './MeetingFile'
import { conferencesInfo } from '@/api/conferences'
import { mapGetters } from 'vuex'
export default {
  name: 'MeetingInfo',
  components: {
    MeetingTitle,
    MeetingVideo,
    MeetingSubtitleEdit,
    MeetingMembers,
    MeetingWordCloud,
    MeetingAbstract,
    MeetingFounder,
    MeetingMessage,
    MeetingFile
  },
  data () {
    return {
      // 会议id
      conferenceId: '',
      // 会议信息
      meetingInfo: {},
      activeName: '1'
    }
  },
  computed: {
    ...mapGetters({
      userId: 'userId'
    }),
    _meetingInfo () {
      return this.meetingInfo?.conferenceBase
    },
    _title () {
      return this._meetingInfo?.title
    },
    _time () {
      return `${this._meetingInfo?.actuallyStartTime} 至 ${this._meetingInfo?.actuallyEndTime}`
    },
    // 视频路径
    _videoPath () {
      return this._meetingInfo?.videoPath
    },
    // 会议成员
    _members () {
      return this.meetingInfo?.members
    },
    // 词云
    _wordCloud () {
      return this._meetingInfo?.wordCloudPath
    },
    // 头像
    _founder () {
      return this._members?.filter(member => member.isHost)?.[0]
    },
    isFounder () {
      return this._founder?.userId === this.userId
    }
  },
  created () {
    this.conferenceId = this.$route.query.conferenceId
  },
  mounted () {
    // 获取会议信息
    this.handleConferencesInfo()
  },
  methods: {
    // 返回
    goBack () {
      this.$router.push({
        name: 'MeetingList',
        query: {
          activeName: 'history'
        }
      })
    },
    // 获取会议信息
    async handleConferencesInfo () {
      const { data } = await conferencesInfo(this.conferenceId)
      this.meetingInfo = data
    }
  }
}
</script>

<style lang="scss" scoped>
.meeting-info-box {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin: 10px 0;
  padding: 10px;
  box-sizing: border-box;
  .back {
    margin: 10px 0;
    ::v-deep .el-page-header__content {
      font-size: 16px;
    }
  }
  .meetinginfo {
    width: 1200px;
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      width: 360px;
      padding-left: 10px;
    }
  }
}
::v-deep .el-collapse-item__header {
  background-color: #f4f4f4;
  color: #212121;
  font-size: 14px;
  padding: 0 10px;
  border-radius: 2px;
}
::v-deep .el-collapse-item__content {
  color: #212121;
  font-size: 12px;
  font-weight: 400;
}
</style>
